<template>
  <div class="DimensionSelectValueSet-page">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="vsForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 值集编码 -->
        <Form-item prop="vsCode" :label="$t('module.valueSet.vsCode')">
          <Input
            type="text"
            v-model.trim="searchForm.vsCode"
            :placeholder="$t('module.valueSet.enterVsCode')"
            @on-enter="searchValueSet"
          ></Input>
        </Form-item>
        <!-- 值集名称 -->
        <Form-item prop="vsName" :label="$t('module.valueSet.vsName')">
          <Input
            type="text"
            v-model.trim="searchForm.vsName"
            :placeholder="$t('module.valueSet.enterVsName')"
            @on-enter="searchValueSet"
          ></Input>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">  
          <RPButton optType="search" @click="searchValueSet" />
          <RPButton optType="reset" @click="resetValueSet" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="valueSetTable" :config="pageTableConfig"> 
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="searchValueSet" />
        <RPButton optType="reset" @click="resetValueSet" />
      </div>
      -->
    </InnerPageTable>
  </div>
</template>
<script>
import role from "@lang/modules/role";
import valueSet from "@lang/modules/valueSet";
import { ComTypes, CoreModuleName } from "@/const.js";

export default {
  name: "dimension-value-set",
  components: {},
  locales: {
    "zh-CN": {
      module: {
        role: role["zh-CN"],
        valueSet: valueSet["zh-CN"]
      }
    },
    "en-US": {
      module: {
        role: role["en-US"],
        valueSet: valueSet["en-US"]
      }
    }
  },
  props: {
    productId: {
      type: String,
      default: ""
    }
  },
  data() {
    const vm = this;
    return {
      valuesetRest: true,
      searchForm: {
        adminId: "",
        productCode: this.productId,
        vsCode: "",
        vsName: "",
        enabled: 1//只取有效值集
      },
      roleList: [],
      pageTableConfig: {
        loadDataFn: this.GetValueSetList,
        columnsFn: this.columns,
        autoFirst: false, //默认 就是 false, 要配置在这里
        highlightRow: true
      }
    };
  },
  computed: {},
  created: function() {
    this.$emit("SetTitle", this.$t('module.valueSet.selectValue'));
    this.$emit("SetPageWidth", 894);
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.determine"),
        theme: "primary",
        handle: this.confirm
      },
      {
        text: this.$t("common.close"),
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);

    this.QueryProductData();
  },
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    GetValueSetList({ responseProcess, param }) {
      $http.post(`${window.RPConfig.setting}/valueset/list/page`, param).then(response => {
        responseProcess(response.data);
      });
    },
    columns() {
      return [
        // {
        //   title: this.$t("common.num"),
        //   type: "index",
        //   width: 50,
        //   align: "center"
        // },
        {
          title: this.$t("module.valueSet.vsCode"),
          align: "left",
          key: "vsCode"
        },
        {
          title: this.$t("module.valueSet.vsName"),
          align: "left",
          key: "vsName"
        },
        {
          title: this.$t("module.valueSet.vsType"),
           align: "left",
          key: "vsType",
          width: 80,
          render: (h, params) => {
            return h(
              "span",
              params.row.vsType == "1" ? this.$t("module.valueSet.independent") : this.$t("module.valueSet.subordinate")
            );
          }
        },
        // {
        //   title: this.$t("module.valueSet.ownnerproduct"),
        //   align: "left",
        //   key: "productCode",
        //   width: 120,
        //   render: (h, params) => {
        //     return h("span", this.getProductName(params.row.productCode));
        //   }
        // },
        {
          title: this.$t("common.status"),
           align: "left",
          key: "enabled",
          width: 100,
          render: (h, params) => {
            return h(
              "StatusButton",
              {
                props: {
                  status: params.row.enabled == 1 ? "0" : "1"
                }
              },
              params.row.enabled == 1 ? this.$t("common.enable") : this.$t("common.disable")
            );
          }
        }
      ];
    },
    searchValueSet(page = 1) {
      this.$refs["valueSetTable"].load(this.searchForm, page);
    },
    resetValueSet() {
      this.$refs["vsForm"].resetFields();
      this.searchValueSet();
    },
    getProductName(code) {
      for (let item of this.products) {
        if (code == item.vsiKey) {
          return item.vsiValue;
        }
      }
      return code;
    },
    QueryProductData() {
      //获取产品类型
      $http
        .get(`${window.RPConfig.setting}/valueset/item/list?vsCode=RC_PRODUCT`)
        .then(response => {
          this.products = response.data;
          this.searchValueSet();
        })
        .catch(error => {
          this.$message.error({
            content: error.message,
            duration: 3
          });
        });
    },
    confirm() {
      let row = this.$refs["valueSetTable"].getHighlightRow();
      this.$emit("Close", row);
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
// ok统一注释的样式
// .DimensionSelectValueSet-page {
//   .run-search-bar>div:last-child {
//     margin-top: 10px!important;
//   }
// }
</style>